@keyframes hideMenu {
    0% {
      opacity: 0;
      transform: translate(-100px,0)
    }
  
    100% {
      opacity: 1;
      transform: translate(0, 0)
    }
  }
& > .layui-side {
    // top:auto;
    position: relative;
    background: none;
    display: flex;
    flex-direction: column;
    height: auto;
    align-self: flex-start;
    // margin:10px;
    // max-height: calc(100% - 33px);
    // flex:auto;
    max-height: 100%;
    width:260px;
    .card-bg();
    & > .side-menu-type {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 6px;
        display: flex;
        align-items: center;
        &::before {
            width: 2px;
            height: 12px;
            content: "";
            background: #fff;
            position: relative;
            margin: 0 4px 0 0;
        }
    }
    & > .layui-side-scroll {
        width: auto;
        // max-height: 100%;
        flex: auto;
        overflow: auto;
        padding: 0;
        .scrollbar();
        & > .layui-side-menu {
        }
        & > .layui-nav {
            margin: 0;
            width: auto;
            padding:10px 0;
            box-sizing: border-box;
            .layui-nav-more{
                // font-family: 'zkuasgm-icon';
                content: '';
                width:20px;
                height:20px;
                position: relative;
                top:0;
                right:0;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all .4s;
                -webkit-transition: all .4s;
                background:rgba(0,0,0,.8);
                border-radius: 50px;
                border:0;
                &::before{
                    // font-family: 'zkuasgm-icon';
                    // content: '\e9bf';
                    font-family: 'layui-icon';
                    content: '\e602';

                }
                // align-self:flex-end;
            }
            
            & > .layui-nav-item {
                box-sizing: border-box;
                margin:4px 0;
                dd{
                    & > a{
                        padding:0 10px 0 10px;
                        height: auto;
                        line-height: auto;
                        display: flex;
                        align-items: center;
                        // border-top-right-radius: 32px;
                        // border-bottom-right-radius: 32px;
                        // border-radius: 0 32px 32px 0;
                        & > cite{
                            flex:auto;
                            padding:0 0 0 4px;
                            transition: all .4s;
                            -webkit-transition: all .4s;
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                            width: 50px;
                        }
                        &:hover{
                            background:rgba(255,255,255,.05);
                            & > cite{
                                padding:0 0 0 8px;
                            }
                        }
                    }
                    &.layui-this {
                        background: rgba(78, 49, 49, 0);
                        & > a{
                            // background: linear-gradient(98deg,@primaryColor,darken(@primaryColor,20%) 90%) !important;
                            background:rgba(0,0,0,.3);
                            box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.4);
                            border-radius: 6px;
                            &:hover{
                                background-color: linear-gradient(98deg,@primaryColor,darken(@primaryColor,20%) 90%) !important;
                            }
                        }
                    }
                    &>.layui-nav-child{
                        animation: hideMenu .3s;
                        // display: block;
                        // transition: max-height 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
                        // max-height: 20px;
                        // overflow: hidden;
                    }
                }
                .layui-nav-itemed{
                    // border-radius: 0 24px 24px 0;
                    // border:1px solid rgba(255, 255, 255, 0.2);
                    background-color: rgba(255, 255, 255, 0.08);
                    // border-left:1px solid #fff;
                    &>a,&>a:hover{
                        background:rgba(255,255,255,.2);
                        .layui-nav-more{
                            margin: 0;
                            transform:rotate(90deg);
                        }
                    }
                    &> .layui-nav-child{
                        box-sizing: border-box;
                        background-color: rgba(0,0,0,0)!important;
                        padding:6px;
                        // max-height: 500px;
                        // display: block;
                    }
                }
                // & > .layui-nav-itemed {
                //     & > .layui-nav-child {
                //         background-color: rgba(0, 0, 0, 0.2) !important;
                //         & > .layui-this {
                //             background: rgba(255, 255, 255, 0.05);
                //             & > a {
                //                 background: none;
                //             }
                //         }
                //     }
                // }
            }
            
        }
    }
}